<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="1000px"
    @close="closeDialog"
  >
    <el-form
      class="demo-form-inline"
      :inline="true"
      :model="state.xuanzeInvConditions"
    >
      <el-row>
        <el-col :span="5">
          <el-form-item label="编码">
            <el-input
              v-model="state.xuanzeInvConditions.invcode"
              placeholder="存货编码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="名称">
            <el-input
              v-model="state.xuanzeInvConditions.invname"
              placeholder="存货名称"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="规格">
            <el-input
              v-model="state.xuanzeInvConditions.invspec"
              placeholder="规格"
            />
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="型号">
            <el-input
              v-model="state.xuanzeInvConditions.invtype"
              placeholder="型号"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <el-button type="primary" @click="queryInv">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-divider />
    <el-table
      :data="state.invDatas"
      :highlight-current-row="true"
      size="small"
      style="width: 100%"
      @row-click="invRowClick"
      @row-dblclick="invRowDbClick"
    >
      <el-table-column label="编码" prop="invcode" />
      <el-table-column label="名称" prop="invname" />
      <el-table-column label="规格" prop="invspec" />
      <el-table-column label="型号" prop="invtype" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="quedingInv">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
  import { ref } from 'vue'
  import { getInventoryPageApi } from '@/api/base/inventory'
  import { localStorageConfig } from '@/config/localstorage.config'

  const dialogVisible = ref(false)
  const dialogTitle = '选择存货'

  const state = reactive({
    xuanzeInvConditions: {},
    invDatas: [],
    xuanZinv: {},
  })

  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 10,
    total: 0,
  })

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  //#region dialog打开关闭相关方法
  const toOpenXuanzeInvDialog = async () => {
    dialogVisible.value = true
  }
  //#endregion
  //#region 查询存货
  const queryInv = async () => {
    var params = {
      pkCorp: pkCorp,
      isSelf: 1,
      pageSize: paginationParams.pageSize,
      pageNum: paginationParams.pageNum,
      ...state.xuanzeInvConditions,
    }
    const { code, data } = await getInventoryPageApi(params)
    if (code === 2000) {
      state.invDatas = data.list
      paginationParams.total = data.total
    }
  }
  //#endregion
  //#region pagintion 开始
  const layout = ref('total, sizes, prev, pager, next, jumper')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNum = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 10
    paginationParams.pageNum = 1
  }
  //#endregion pagintion 结束

  const invRowClick = (data) => {
    state.xuanZinv = data
  }

  const invRowDbClick = (data) => {
    state.xuanZinv = data
    quedingInv()
  }

  const quedingInv = () => {
    _emits('selected-callback', state.xuanZinv)
    dialogVisible.value = false
  }

  watch(paginationParams, () => {
    queryInv()
  })
  const closeDialog = () => {}
  const _emits = defineEmits(['selected-callback'])
  defineExpose({ toOpenXuanzeInvDialog })
</script>
